<template>
  <!--  维修信息-->
  <div class="">
    <el-form :model="detailForm" class="el-form" v-loading="loading" label-width="160px">
      <el-card class="box-card" shadow="never">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维修类型:">
              <el-select v-model="status" clearable  placeholder="请选择" @change="handleChange">
                <el-option label="报废" value="1"/>
                <el-option label="一般维修" value="2"/>
                <el-option label="出险" value="3"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="itemClass">
            <el-form-item label='车辆 "维修" 总次:'>
              <span>{{ detailForm.totalCount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="itemClass">
            <el-form-item label='车辆 "维修" 总金额:'>
              <span>{{ format_thousand(detailForm.totalMoney) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column align="center" label="操作" width="60">
                <template #default="{row}">
                  <el-button type="text" @click="handleView(row)">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="maintenanceType" align="center" label="维修类型" show-overflow-tooltip
                               min-width="100">
                <template #default="{row}">
                  <span v-if="row.maintenanceType == 1">报废</span>
                  <span v-if="row.maintenanceType == 2">一般维修</span>
                  <span v-if="row.maintenanceType == 3">出险</span>
                </template>
              </el-table-column>
              <el-table-column prop="customerName" align="center" label="客户名称">
              </el-table-column>
              <el-table-column prop="expectStartTime" align="center" label="预计开始时间">
              </el-table-column>
              <el-table-column prop="expectEndTime" align="center" label="预计结束时间">
              </el-table-column>
              <el-table-column prop="actualStartTime" align="center" label="实际际开始时间">
              </el-table-column>
              <el-table-column prop="actualEndTime" align="center" label="实际结束时间">
              </el-table-column>
              <!--              <el-table-column prop="name" label="归属组织">-->
              <!--              </el-table-column>-->
              <!--              <el-table-column prop="address" label="所在城市">-->
              <!--              </el-table-column>-->
            </el-table>
          </el-col>
        </el-row>

      </el-card>
    </el-form>
  </div>
</template>

<script>
import {getRepairMessage} from "@/api/zcwh/vehicleTabs.js";

export default {
  name: "index",//维修信息
  props: ['carId'],
  computed: {},
  watch: {},
  data() {
    return {
      detailForm: {},
      options: [],
      tableData: [{name: ''}],
      loading: false,
      status: ''
    };
  },
  created() {
    this.handleList()
  },
  mounted() {
  },
  methods: {
    handleList() {
      this.loading = true;
      let obj = {
        carId: this.carId + '',
        status: this.status,
      }
      getRepairMessage(obj)
          .then((res) => {
            this.detailForm = res;
            this.tableData = res.vo;
          })
          .finally(() => {
            this.loading = false;
          });
    },

    handleChange(val) {
      this.status = val
      this.handleList()
    },

    handleView(row) {
      this.$router.push({
        path: "/clgl/maintenanceDetails",
        query: {
          id: row.maintenanceId,
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.itemClass {
  ::v-deep .el-form-item__label {
    font-weight: bold !important;
    color: black;
    font-size: 16px;
  }
}

.el-form {
  .box-card {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>


